const swiperUlData = [
    { summer: '生鲜', content: ['水果', '蔬菜'] },
    { summer: '美食', content: ['面点', '干果'] },
    { summer: '餐厨', content: ['数码产品'] },
    { summer: '电器', content: ['床品', '四件套', '被枕'] },
    { summer: '居家', content: ['奶粉', '玩具'] },
    { summer: '洗护', content: ['洗发', '洗澡'] },
    { summer: '孕婴', content: ['奶粉', '玩具'] },
    { summer: '服饰', content: ['女装', '童装'] },
    { summer: '杂货', content: ['户外', '图书'] },
    { summer: '品牌', content: ['品牌制造'] }
]

const tipData = [
    { summer: '购物指南', content: ['购物流程', '支付方式', '售后方式'] },
    { summer: '配送方式', content: ['配送运费', '配送范围', '配送时间'] },
    { summer: '关于我们', content: ['平台规则', '联系我们', '问题反馈'] },
    { summer: '售后服务', content: ['售后政策', '退款说明', '取消订单'] },
    { summer: '服务热线', content: ['在线客服', '客服电话 400-0000-000', '工作事件 周一至周瑞 8:00-18:00'] }
]

const bgimages = [
    '../uploads/banner1.png',
    '../uploads/banner1.png',
    '../uploads/banner1.png',
    '../uploads/banner1.png'
]

const goods = [
    { img: '/uploads/goods1.png', desc: 'KN95级莫兰迪色防护口罩', price: '79' },
    { img: '/uploads/goods2.png', desc: '紫檀外独板三层普洱茶盒', price: '566' },
    { img: '/uploads/goods3.png', desc: '法拉蒙高颜值记事本可定制', price: '58' },
    { img: '/uploads/goods4.png', desc: '科技布布艺沙发', price: '3579' }
]

const popular = [
    { img: '/uploads/recommend1.png', title: '特惠推荐', desc: '我猜得到 你的需要' },
    { img: '/uploads/recommend2.png', title: '爆款推荐', desc: '人气好物推荐' },
    { img: '/uploads/recommend3.png', title: '节日礼品一站买全', desc: '编辑尽心整理推荐' },
    { img: '/uploads/recommend4.png', title: '鲜花园艺', desc: '给生活增加仪式感' }
]

const hots = [
    './uploads/hot1.png',
    './uploads/hot2.png',
    './uploads/hot3.png',
    './uploads/hot4.png',
    './uploads/hot5.png',
]

const freshFoods = [
    { img: './uploads/fresh1.png', desc: '双味千层，手抓饼烤肉组合', size: '240g/袋 4片装', handle: '加热即食', price: '89.99' },
    { img: './uploads/fresh2.png', desc: '云南甘蔗慢熬红糖馒头', size: '220g/袋 5个装', handle: '加热即食', price: '9.00' },
    { img: './uploads/fresh3.png', desc: '日式风味小圆饼', size: '圆形【海盐味】', handle: '糖果零食', price: '89.99' },
    { img: './uploads/fresh4.png', desc: '全麦奶油浓香小面包', size: '50g*12袋', handle: '美味西点', price: '69.00' },
    { img: './uploads/fresh5.png', desc: '秘制外皮五福摩提大福点心', size: '150g/盒', handle: '美味西点', price: '39.99' },
    { img: './uploads/fresh6.png', desc: '水果面膜韩国蜂蜜柚子茶', size: '560g/瓶', handle: '冲调饮品', price: '49.50' },
    { img: './uploads/fresh7.png', desc: '浓情比利时巧克力礼盒装', size: '205克/盒', handle: '糖果零食', price: '120.00' },
    { img: './uploads/fresh8.png', desc: '抹茶奶油小蛋糕礼盒装', size: '220克/盒', handle: '美味西点', price: '60.00' }
]


const dressList = [
    { img: './uploads/clothes1.png', desc: '男女情侣抗菌夜视休闲跑鞋', size: '36/37/38码', handle: '新款服饰', price: '719.00' },
    { img: './uploads/clothes2.png', desc: 'jessyline2022秋装专柜款', size: 'M码', handle: '新款服饰', price: '699.00' },
    { img: './uploads/clothes3.png', desc: '高领纯羊毛针织打底衫毛衣', size: 'S/M/L码', handle: '新款服饰', price: '229.00' },
    { img: './uploads/clothes4.png', desc: '潮流文艺袜子女纯棉船袜', size: '36-38', handle: '居家日用', price: '14.50' },
    { img: './uploads/clothes5.png', desc: '新款韩系设计感美背衬衫裙', size: 'M码 黑色', handle: '新款服饰', price: '179.00' },
    { img: './uploads/clothes6.png', desc: '头层牛皮真皮百搭个性腰带', size: '120cm', handle: '个性配饰', price: '565.00' },
    { img: './uploads/clothes7.png', desc: '束念帆布ins潮百搭板鞋子', size: '36/36/38码', handle: '新款服饰', price: '99.99' },
    { img: './uploads/clothes8.png', desc: 'Descente迪桑特训练运动裤', size: '标码 墨绿色/白色/蓝色', handle: '新款服饰', price: '269.00' }
]

const kitchenList = [
    { img: './uploads/kitchen1.png', desc: '紫砂茶漏茶渣茶叶过滤器', size: '【禅意舍得】', handle: '居家好物', price: '210.00' },
    { img: './uploads/kitchen2.png', desc: '简约贝壳果盘 零食收纳盘 ', size: '【灰色】', handle: '居家好物', price: '32.99' },
    { img: './uploads/kitchen3.png', desc: '电动打奶泡器咖啡奶泡机', size: 'KJBQ-4', handle: '居家好物', price: '30.00' },
    { img: './uploads/kitchen4.png', desc: '哈尔斯保温壶大容量家用', size: '304不锈钢', handle: '居家好物', price: '69.50' },
    { img: './uploads/kitchen5.png', desc: '龙泉青瓷碗碟盘餐具套装', size: '【碗+盘+杯子】', handle: '厨房好物', price: '99.00' },
    { img: './uploads/kitchen6.png', desc: '戚风蛋糕模具家用套装', size: '6/8胚子4寸', handle: '厨房好物', price: '35.00' },
    { img: './uploads/kitchen7.png', desc: '托盘家用放茶杯水杯茶盘', size: '水果餐盘', handle: '居家好物', price: '12.99' },
    { img: './uploads/kitchen8.png', desc: '哈尔斯双层隔热便携水杯', size: '橙色/绿色', handle: '居家好物', price: '56.00' }
]

const homeList = [
    { img: './uploads/home1.png', desc: '北极绒房间的彩虹全棉床单', size: '《房间的彩虹》', handle: '床上用品', price: '59.00' },
    { img: './uploads/home2.png', desc: '沃特曼毛绒玩具玩偶抱枕', size: '23cm小号粉色70332', handle: '创意礼品', price: '39.99' },
    { img: './uploads/home3.png', desc: '水培植物玻璃花瓶大', size: '水养花瓶1903', handle: '鲜花生活', price: '19.00' },
    { img: './uploads/home4.png', desc: '韩版网红仙女发圈小皮筋', size: '森系头绳（三件套）', handle: '个性配饰', price: '29.50' },
    { img: './uploads/home5.png', desc: '竖纹透明仿真干花插花花瓶', size: '竖纹玻璃花瓶【透明】', handle: '鲜花生活', price: '29.00' },
    { img: './uploads/home6.png', desc: '折叠简约家用简易书桌', size: '1.22米折叠桌二档【白色】', handle: '生活日用', price: '79.00' },
    { img: './uploads/home7.png', desc: '自动吸水懒人花盆', size: '直径15cm', handle: '鲜花生活', price: '29.99' },
    { img: './uploads/home8.png', desc: '百富帝byford碳化竹席枕套', size: '单只装 48-74cm', handle: '床上用品', price: '39.00' }
]


document.addEventListener('DOMContentLoaded', function () {

    let title = document.querySelector(".title")

    title.addEventListener('mouseover', (e) => {
        if (e.target.tagName === 'LI') {
            let active = title.querySelector(".active")
            active && active.classList.remove("active")
            e.target.classList.add("active")
        }
    })


    // 拼接轮播图左侧
    let swiperUl = document.querySelector(".swiper ul")
    let swiperUlHtml = '';
    swiperUlData.map((item) => {
        swiperUlHtml += `
        <li>
                    <dl>
                    <dt><a href="#">${item.summer}</a></dt>
        `
        item.content.map((dd) => {
            swiperUlHtml += `<dd><a href="#">${dd}</a></dd>`
        })
        swiperUlHtml += `</dl>
        <i class="iconfont icon-arrow-right-bold"></i>
    </li>`
    })
    swiperUl.innerHTML = swiperUlHtml

    // 拼接轮播图按钮
    let floatPointUl = document.querySelector(".float-point ul")
    let floatPointHtml = ''
    bgimages.map(() => {
        floatPointHtml += `<li></li>`
    })
    floatPointUl.innerHTML = floatPointHtml
    floatPointUl.children[0].className = 'active'
    floatPointUl.addEventListener('mouseover', (e) => {
        if (e.target.tagName === 'LI') {
            let active = floatPointUl.querySelector(".active")
            active && active.classList.remove("active")
            e.target.classList.add("active")
        }
    })

    // 拼接新鲜好物
    let freshUl = document.querySelector(".fresh .content ul");
    let freshLiHtml = '';
    goods.map(({ img, desc, price }) => {
        freshLiHtml += `
        <li>
                    <div class="image">
                        <img src="${img}" alt="">
                        <p class="desc">${desc}</p>
                        <p class="price">￥ ${price}</p>
                    </div>
                </li>
                `
    })
    freshUl.innerHTML = freshLiHtml

    // 拼接人气推荐
    let popularUl = document.querySelector(".popular .content ul");
    let popularLiHtml = ''
    popular.map(({ img, title, desc }) => {
        popularLiHtml += `
        <li>
                    <div class="image">
                        <img src="${img}" alt="">
                        <p class="title">${title}</p>
                        <p class="desc">${desc}</p>
                    </div>
                </li>
        `
    })
    popularUl.innerHTML = popularLiHtml

    // 热门品牌拼接
    let hotUl = document.querySelector(".hot .content ul");
    let hotLiHtml = '';
    hots.map(item => {
        hotLiHtml += `
        <li>
                        <div class="image">
                            <img src="${item}" alt="">
                        </div>
                    </li>`
    })
    hotUl.innerHTML = hotLiHtml

    // 给生鲜标签添加悬浮样式
    let freshTagUl = document.querySelector('.fresh-food .tag ul');
    freshTagUl.addEventListener('mouseover', e => {
        let node = e.target.parentNode;
        if (node.tagName === 'LI') {
            // 去除相同属性
            let active = freshTagUl.querySelector('.active')
            active && active.classList.remove('active')
            // 给自己添加
            node.classList.add('active')
        }
    })
    // 设置生鲜
    let freshContentUl = document.querySelector('.fresh-food .content ul');
    freshContentUl.innerHTML = freshFoods.map(({ img, desc, size, price, handle }) => {
        return `
        <li >
                        <div class="iamge">
                            <img src="${img}" alt="">
                        </div>
                        <p class="desc">${desc}</p>
                        <p class="size">${size}</p>
                        <p class="handle">${handle}</p>
                        <p class="price">￥ ${price}</p>
                        <div class="like">
                            <h4>找相似</h4>
                            <p>发现更多宝贝 <i class="iconfont icon-arrow-right-bold"></i></p>
                        </div>
                    </li>
        `
    }).join("")

    // 生鲜绑定触发事件
    const freshContentLis = freshContentUl.querySelectorAll('li')
    console.log(freshContentLis);
    freshContentLis.forEach(li => {
        li.addEventListener('mouseenter', function () {
            this.classList.add('active')
        })
        li.addEventListener('mouseleave', function () {
            this.classList.remove('active')
        })
    })

    // 给服饰标签添加悬浮样式
    let dressTagUl = document.querySelector('.dress .tag ul');
    dressTagUl.addEventListener('mouseover', e => {
        let node = e.target.parentNode;
        if (node.tagName === 'LI') {
            // 去除相同属性
            let active = dressTagUl.querySelector('.active')
            active && active.classList.remove('active')
            // 给自己添加
            node.classList.add('active')
        }
    })
    //设置服饰
    let dressContentUl = document.querySelector('.dress .content ul');
    dressContentUl.innerHTML = dressList.map(({ img, desc, size, price, handle }) => {
        return `
       <li >
                       <div class="iamge">
                           <img src="${img}" alt="">
                       </div>
                       <p class="desc">${desc}</p>
                       <p class="size">${size}</p>
                       <p class="handle">${handle}</p>
                       <p class="price">￥ ${price}</p>
                   </li>
       `
    }).join("")


    // 给餐厨标签添加悬浮样式
    let kitchenTagUl = document.querySelector('.kitchen .tag ul');
    kitchenTagUl.addEventListener('mouseover', e => {
        let node = e.target.parentNode;
        if (node.tagName === 'LI') {
            // 去除相同属性
            let active = kitchenTagUl.querySelector('.active')
            active && active.classList.remove('active')
            // 给自己添加
            node.classList.add('active')
        }
    })
    //设置餐厨
    let kitchenContentUl = document.querySelector('.kitchen .content ul');
    kitchenContentUl.innerHTML = kitchenList.map(({ img, desc, size, price, handle }) => {
        return `
       <li >
                       <div class="iamge">
                           <img src="${img}" alt="">
                       </div>
                       <p class="desc">${desc}</p>
                       <p class="size">${size}</p>
                       <p class="handle">${handle}</p>
                       <p class="price">￥ ${price}</p>
                   </li>
       `
    }).join("")


    // 给居家标签添加悬浮样式
    let homeTagUl = document.querySelector('.home .tag ul');
    homeTagUl.addEventListener('mouseover', e => {
        let node = e.target.parentNode;
        if (node.tagName === 'LI') {
            // 去除相同属性
            let active = homeTagUl.querySelector('.active')
            active && active.classList.remove('active')
            // 给自己添加
            node.classList.add('active')
        }
    })
    //设置居家
    let homeContentUl = document.querySelector('.home .content ul');
    homeContentUl.innerHTML = homeList.map(({ img, desc, size, price, handle }) => {
        return `
       <li >
                       <div class="iamge">
                           <img src="${img}" alt="">
                       </div>
                       <p class="desc">${desc}</p>
                       <p class="size">${size}</p>
                       <p class="handle">${handle}</p>
                       <p class="price">￥ ${price}</p>
                   </li>
       `
    }).join("")

})